<template>
	<view class="tableboxpage">
	   <view class="footerShells">
	     <view v-for="(item, index) in list" :key="index" style="position: relative;" :class="{ Selection: flag == item.id }" @tap="Jump(item)">
	       <image v-if="flag == item.id && item.id != '3'" style="width: 40rpx; height: 40rpx" :src="item.image1" />
	       <image v-else style="width: 40rpx; height: 40rpx" :src="item.image2" />
	       <view class="footText">
				<view class="footInfo">{{ item.name }}</view>
		   </view>
			<view  v-if="item.id == '2' && count>0"  class="unRead">{{ count }}</view>

	     </view>
	   </view>
		<image class="tabLine"  src="../static/tabLine.png" />
	   <image @tap="Jump({url:'/pages/tabbar/chat/chat'})" style="position:fixed; bottom: 24rpx; left: calc(50% - 40rpx); z-index: 99999999999999; width: 80rpx; height: 80rpx;" src="../static/chat_choosed.png" />
	 </view>
</template>

<script>
	export default {
		props:{
			flag:{
				type:[Number,String],
				default: 1,
			}
		},
		data() {
			return {
				count:0,
				list:[
					{
						id:'1',
						url:'/pages/tabbar/home/home',
						name:'首页',
						image1:'../static/home_choosed.png',
						image2:'../static/home.png'
					}
				]
			};
		},
		methods: {
			Jump(item){
				console.log('item',item)
				uni.reLaunch({
					url: item.url
				})
			},
			// 获取socket消息
			getMessage(){
				let _this = this;
				_this.count = uni.getStorageSync('count')
				uni.onSocketMessage(function (res) {
					let message = JSON.parse(res.data)
					console.log("tabbar页面socket消息",message)
					if(message.code == 54268449){
						uni.setStorageSync('count',message.object.unMessages)
						uni.setStorageSync('questionLink',message.object.questionnaireLink)
						_this.count = message.object.unMessages
					}else{
						uni.setStorageSync('count',message.object.unMessages)
						_this.count = message.object.unMessages
					}
				});
			},
		},
		mounted() {
			this.getMessage();
			this.list = [];
			let arr = [];
			arr = [	
			 {
			   id: '1',
			   url: '/pages/tabbar/home/home',
			   name: '首页',
			   image1:'../static/home_choosed.png',
			   image2:'../static/home.png'
			 },
			 {
			   id: '2',
			   url: '/pages/tabbar/message/message',
			   name: '消息',
			   image1: '../static/message_choosed.png',
			   image2: '../static/message.png',
			 },
			 {
			   id: '3',
			   url: '/pages/tabbar/chat/chat',
			   image1: '../static/chat_choosed.png',
			 },
			 {
			   id: '4',
			   url: '/pages/tabbar/online/online',
			   name: '在线',
			   image1: '../static/online_choosed.png',
			   image2: '../static/online.png',
			 },
			 {
			   id: '5',
			   url: '/pages/tabbar/my/my',
			   name: '我的',
			   image1: '../static/my_choosed.png',
			   image2: '../static/my.png',
			 },
		   ];
		   this.list = arr;
		}
	}
</script>

<style lang="less">
.tabLine{
	width: 100%;
	height: 10rpx;
	position: fixed;
	bottom: 99rpx;
	z-index: 99999999;
}
.tableboxpage {
	height: 100upx;
	flex: none;
}
.footerShells {
 position: fixed;
 bottom: 0;
 left: 0;
 width: 100%;
 height: 98rpx;
 background: #fff;
 display: flex;
 flex-direction: row;
 z-index: 99999999999;
}

.footerShells > view {
 display: flex;
 /* margin-top: 8upx; */
 flex: 1;
 height: 100%;
 text-align: center;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

.footerShells .Selection {
 color: #FF7F0F;
}

.footerShells .Selection span {
 color: #FF7F0F;
}

.footerShells .Selection .footText {
 color: #FF7F0F;
}

.footerShells span {
 font-size: 36upx;
 text-align: center;
 color: #666;
}

.footText {
 text-align: center;
 font-size: 24rpx;
 color: #666;
 margin: 8rpx 0 0;
}

.unRead{
	position: absolute;
	text-align: center;
	min-width: 20rpx;
	min-height: 20rpx;
	padding: 4rpx 8rpx;
	background-color: #FF7F0F;
	border-radius: 50%;
	right: 40rpx;
	top: 0rpx;
	color: #fff;
	font-size: 10px;
}


</style>
